<template>
  <el-dialog :title="type.label" append-to-body destroy-on-close :visible.sync="visible" center>
    <div v-if="type.value === '1'">
      <div class="title">不良反应/事件过程描述填写要求</div>
      <div class="table-container">
        <div class="tr">
          <div class="td1 border-r-b pl10">套用格式</div>
          <div class="td2 border-r-b pl10">何时出现何不良反应，何时停药，采取何措施，何时不良反应治煎或好转。</div>
        </div>
        <div class="tr">
          <div class="td1 border-r-b pl10">要求</div>
          <div class="td2">
            <div class="border-r-b pl10">
              以时间为线索，记录不良反应的发生、发展及处理过程，为关联性评价提供充分的信息。做到〝三个时间、三个项目、两个尽可能”
            </div>
            <div class="flex-layout ">
              <div class="border-r-b td1 pl10">三个时间</div>
              <div class="border-r-b td2 pl10">
                <p>不良反应发生的时间</p>
                <p>采取措施干预不良反应的时间</p>
                <p>不良反应终结的时间</p>
              </div>
            </div>
            <div class="flex-layout">
              <div class="border-r-b td1 pl10">三个项目</div>
              <div class="border-r-b td2 pl10">
                <p>事件初始发生时的相关症状、体征和相关检查</p>
                <p>动态变化的相关症状、体征和相关检查</p>
                <p>采取的千预措施后的症状、体征和相关检查</p>
              </div>
            </div>
            <div class="flex-layout">
              <div class="border-r-b td1 pl10">两个尽可能</div>
              <div class="border-r-b td2 pl10">
                <p>不自反店/重件的表现填写时要尽可能明确、且体 有关的辅助松查结果要尽可能明确填写</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <el-table :data="tableData" height="400">
        <el-table-column prop="name" label="属性名称" />
        <el-table-column prop="dataContent" label="数据内容">
          <template slot-scope="scope">
            <el-input v-model="scope.row.dataContent" />
          </template>
        </el-table-column>
        <el-table-column prop="unit" label="单位">
          <template slot-scope="scope">
            <el-select v-if="scope.row.unitList && scope.row.unitList.length > 0" v-model="scope.row.unit">
              <el-option
                v-for="unit in scope.row.unitList"
                :key="unit.value"
                :label="unit.label"
                :name="unit.value"
                :value="unit.value"
              />
            </el-select>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogOk">确定</el-button>
      <el-button v-if="type.value !== '1'" @click="visible = false">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ['type', 'changeRequireStr'],
  data() {
    return {
      visible: false,
      tableData: []
    }
  },
  mounted() {
    console.log(this.data)
  },
  methods: {
    open(value) {
      this.visible = true
      if (value && value.data) {
        const data = value.data
        this.tableData = JSON.parse(JSON.stringify(data))
      }
    },
    dialogOk() {
      const list = this.tableData
      let str = ''
      if (list && list.length > 0) {
        list.forEach((item) => {
          if (item && item.dataContent) {
            str = str + `${item.name}:${item.dataContent}${item.unit};`
          }
        })
      }
      this.$emit('changeRequireStr', str)
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  text-align: center;
  font-size: 16px;
  padding-bottom: 10px;
}
.table-container {
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc;
  .border-r-b {
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
  }
  .flex-layout {
    display: flex;
  }
  .tr {
    display: flex;
  }
  .td1 {
    width: 20%;
    display: flex;
    align-items: center;
  }
  .td2 {
    width: 80%;
  }
}
</style>
